<template>
  <div class="nr">
    <div class="box1">
      <img class="right" src="../assets/pay/bi.png" alt />
      <div class="left">
        <div>购买：{{gold}}乐讯币</div>
        <div>
          付款：
          <span style="color:#FF8B02;">{{money}}元</span>
        </div>
      </div>
    </div>

    <div class="box2">
      <div class="title">支付方式</div>
      <div class="box2-item">
        <div class="b2-left">
          <img
            style="width:0.52rem;height:0.52rem;margin-right:0.2rem;"
            src="../assets/pay/wx.png"
            alt
          />
          <div>微信支付</div>
        </div>
        <img
          class="b2-right"
          @click="selectcurrent(1)"
          v-if="select!=1"
          src="../assets/pay/wxz.png"
          alt
        />
        <img
          class="b2-right"
          @click="selectcurrent(1)"
          v-if="select==1"
          src="../assets/pay/xz.png"
          alt
        />
      </div>

      <div class="box2-item" style="border:none;">
        <div class="b2-left">
          <img
            style="width:0.52rem;height:0.52rem;margin-right:0.2rem;"
            src="../assets/pay/zfb.png"
            alt
          />
          <div>支付宝支付</div>
        </div>
        <img
          class="b2-right"
          @click="selectcurrent(2)"
          v-if="select!=2"
          src="../assets/pay/wxz.png"
          alt
        />
        <img
          class="b2-right"
          @click="selectcurrent(2)"
          v-if="select==2"
          src="../assets/pay/xz.png"
          alt
        />
      </div>
    </div>

    <div class="btn" @click="topay">确定</div>

    <div class="alipay"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      select: 0,
      uid:'',
      id:'',
      gold:'',
      money:'',
    };
  },
  mounted() {
    // this.getalipay();
    this.uid = this.$route.query.uqid;
    this.id = this.$route.query.id;                                                                                                     
    this.gold = this.$route.query.gold;
    this.money = this.$route.query.money;

    
  },
  methods: {
    selectcurrent(index) {
      this.select = index;
    },
    topay(){
      if(this.select==0){
        this.$message({
         
          message: '请选择支付方式',
          type: "error"
        });
        return
      }
      if(this.select==2){
        this.getalipay()
      }

       if(this.select==1){
        this.getwxpay()
      }
    },
    getalipay() {
      //   this.$get(
      //     // method: "get",
      //     "api/users/ali_pay_app_rech",
      //     {
      //       uqid: localStorage.getItem("uqid"),
      //       id:1,
      //       pay_type:'H5',
      //     }
      //   ).then((response) => {
      //     console.log(response);
      //     if (response.error == "0") {

      //     } else {
      //       this.$message({
      //         showClose: true,
      //         message: response.message,
      //         type: "error",
      //       });
      //     }
      //   });
      var that=this
      this.$axios({
        method: "post",
        url: "api/users/ali_pay_app_rech",
        data: this.$qs.stringify({
          uqid: that.uid,
          id: 1,
          pay_type: "H5",
        }),
        headers: {
          "Content-Type": "application/x-www-form-urlencoded;charset=UTF-8",
        },
      }).then((response) => {
        console.log(response);
        if (response.data.error == "0") {
            this.alipaydata=response

            document.getElementsByClassName("alipay")[0].innerHTML=response.data.data
            document.forms['alipaysubmit'].submit();
        } else {
          this.$message({
            showClose: true,
            message: response.data.message,
            type: "error",
          });
        }
      });
    },


     getwxpay() {
      //   this.$get(
      //     // method: "get",
      //     "api/users/ali_pay_app_rech",
      //     {
      //       uqid: localStorage.getItem("uqid"),
      //       id:1,
      //       pay_type:'H5',
      //     }
      //   ).then((response) => {
      //     console.log(response);
      //     if (response.error == "0") {

      //     } else {
      //       this.$message({
      //         showClose: true,
      //         message: response.message,
      //         type: "error",
      //       });
      //     }
      //   });
      var that=this
      this.$axios({
        method: "post",
        url: "api/mine/recharge",
        data: this.$qs.stringify({
          uqid: that.uid,
          id: 1,
          pay_type: "H5",
        }),
        headers: {
          "Content-Type": "application/x-www-form-urlencoded;charset=UTF-8",
        },
      }).then((response) => {
        console.log(response);
        if (response.data.error == "0") {
            window.location.href=response.data.data.mweb_url;
        } else {
          this.$message({
            showClose: true,
            message: response.data.message,
            type: "error",
          });
        }
      });
    },
  },
};
</script>

<style scoped>
.btn {
  position: fixed;
  width: 5.9rem;
  height: 0.76rem;
  background: rgba(252, 90, 142, 1);
  opacity: 1;
  border-radius: 1000px;

  font-size: 0.32rem;
  font-family: PingFang SC;
  font-weight: 300;
  line-height: 0.44rem;
  color: rgba(255, 255, 255, 1);
  bottom: 1.36rem;
  left: 50%;
  transform: translate(-50%, 0);
  text-align: center;
  line-height: 0.76rem;
}
.b2-right {
  width: 0.4rem;
  height: 0.4rem;
}
.b2-left {
  display: flex;
  align-items: center;
  font-size: 0.24rem;
  font-family: PingFang SC;
  font-weight: 300;
  line-height: 0.34rem;
  color: rgba(178, 178, 178, 1);
}
.box2-item {
  height: 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid rgba(236, 236, 236, 1);
}
.box2 {
  display: flex;
  flex-direction: column;
  justify-self: start;
}
.title {
  font-size: 0.32rem;
  font-family: PingFang SC;
  font-weight: 550;
  line-height: 0.44rem;
  color: rgba(48, 49, 51, 1);
}
.nr {
  width: 100%;
  height: 100%vh; 
  padding: 0.42rem 0.3rem;
  box-sizing: border-box;
  background: rgba(247, 247, 247, 1);
}
.box1 {
  width: 6.86rem;
  height: 2.26rem;
  background: rgba(255, 255, 255, 1);
  opacity: 1;
  border-radius: 0.2rem;
  padding: 0.6rem 0.74rem;
  display: flex;
  box-sizing: border-box;
}

.box2 {
  width: 6.86rem;
  height: 3.12rem;
  background: rgba(255, 255, 255, 1);
  opacity: 1;
  border-radius: 0.2rem;

  padding: 0.32rem 0.28rem 0;

  display: flex;
  box-sizing: border-box;
  margin-top: 0.24rem;
}
.right {
  margin-right: 0.44rem;
  width: 1.06rem;
  height: 1.06rem;
}
.left {
  font-size: 0.36rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  height: 100%;
  font-weight: 550;
  justify-content: space-between;
}
</style>